<template>
  <div>
    <orderHeaderVue title="临时便利贴" />

    <div class="main-layout">
      <div class="main-header">
        <a-button class="btn-css" @click="NewNotes()">生成便利贴</a-button>
      </div>
      <div class="main-content">
        <a-textarea
          v-model:value="textareaVal"
          :rows="7"
          placeholder="记录点事情..."
          :maxlength="800"
          :bordered="false"
        />
      </div>
    </div>

    <div class="footer-layout">
      <div
        v-for="(item, index) in NotesArr.arr"
        :key="index"
        class="footer-item"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>


<script>
import orderHeaderVue from "../components/orderHeader.vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { postJSON } from "../utils/request";
export default defineComponent({
  components: {
    orderHeaderVue,
  },
  setup() {
    const textareaVal = ref("");
    const NotesArr = reactive({
      arr: [],
    });
    const NewNotes = () => {
      let params = {
        text: textareaVal.value,
      };
      postJSON("/NewNotes", params).then((res) => {
        textareaVal.value = "";
        postJSON("/GetNotes").then((res) => {
          NotesArr.arr = res.data;
        });
      });
    };

    onMounted(() => {
      postJSON("/GetNotes").then((res) => {
        NotesArr.arr = res.data;
      });
    });
    return {
      textareaVal,
      NewNotes,
      NotesArr,
    };
  },
});
</script>

<style lang="less" scoped>
.main-layout {
  margin: 0 20px;
  height: 200px;
  .main-header {
    height: 40px;
    line-height: 40px;
    text-align: left;
    .btn-css {
      /* 设置阴影 */
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
      /* 设置card的背景色 */
      background: #ffffff;
    }
  }
  .main-content {
    height: calc(100% - 40px);
    margin-top: 10px;
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    /* 设置card的背景色 */
    background: #ffffff;
  }
}

.footer-layout {
  margin-top: 40px;
  padding: 0 20px;
  height: calc(100vh - 350px);
  overflow: hidden;
  overflow-y: scroll;
  .footer-item {
    margin-top: 14px;
    padding-left: 8px;
    text-align: left;
    height: 100px;
    /* 设置阴影 */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    /* 设置card的背景色 */
    background: #ffffff;
  }
}
</style>